<template>
	<view class="address">
		<view class="empty" v-if="addressList.length == 0">
			<text class="custom-icon custom-icon-dizhi3"></text>
			<view class="text">您还没有收货地址哦！</view>
		</view>

		<view class="addressList" v-for="(item, index) in addressList" :key="index">
			<image v-if="item.is_default == 1" class="addressBg" mode="aspectFill" src="/static/addressBg.png"></image>
			<view class="flex flex_space_b">
				<view class="iconBox flex_conter_c">
					<u-icon name="map-fill" color="#fff" size="42"></u-icon>
				</view>
				<view class="info">
					<view class="userInfo">
						<text class="defaultIcon" v-if="item.is_default == 1">默认</text>
						<text class="uname">{{item.receiver_name}}</text>
						<text class="phone">{{ item.receiver_phone }}</text>
					</view>
					<view class="detailedAddress">
						<text>{{ item.area }} {{item.detail}}</text>
					</view>
				</view>
				<u-icon name="edit-pen" size="36" color="#fe0000" @tap="goEditAddress(index)" ></u-icon>
			</view>
		</view>

		<button class="addBtn" @click="goNewAddress">新增地址</button>
	</view>
</template>

<script>
	var util = require('../../common/util.js');
	export default {
		data() {
			return {
				addressList:[]
			}
		},
		onShow:function(){
			this.loadData();
		},
		methods: {
			// 加载数据
			loadData: function () {
				let that = this;
				let data = {};
				util.requestPost(
				  'api.php/user/shippingAddressList',
				  data,
				  function(res){
					  that.addressList = res.data.addressList;
				  },
				  true
				);
			},
			goEditAddress (index) {
				uni.navigateTo({
					url: `/pages/index/addressChange?address_detail=${JSON.stringify(this.addressList[index])}`
				})
			},
			goNewAddress () {
				uni.navigateTo({
					url: `/pages/index/addressChange`
				})
			},
		}
	}
</script>

<style scoped>
page {
	height: 100%;
}
.address {
	padding: 20rpx;
	min-height: 100%;
	box-sizing: border-box;
	background-color: var(--bgColor);
}
.addressList {
	padding: 20rpx 32rpx;
	border-radius: 12rpx;
	background-color: #FFFFFF;
	position: relative;
	margin-bottom: 20rpx;
}
.addressBg {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	border-radius: 12rpx;
}
.addressList .flex {
	position: relative;
	z-index: 2;
}
.addressList .flex .iconBox {
	background: var(--btnBgColor);
	width: 80rpx;
	height: 80rpx;
	border-radius: 40rpx;
}
.addressList .info {
	flex: 1;
	margin: 0 20rpx;
}
.addressList .info .userInfo {
	font-size: 32rpx;
}
.addressList .info .userInfo .defaultIcon {
	font-size: 24rpx;
	color: var(--primaryColor);
	border: 1rpx solid var(--primaryColor);
	border-radius: 8rpx;
	padding: 2rpx 8rpx;
	margin-right: 8rpx;
}
.addressList .info .userInfo .phone {
	font-size: 24rpx;
	color: #999999;
	margin-left: 12rpx;
}
.addressList .info .detailedAddress {
	font-size: 24rpx;
	margin-top: 12rpx;
}
.addressList .flex.address .info .detailedAddress {
	margin-top: 20rpx;
}
.addBtn {
	width: 300rpx;
	color: #fff;
	font-weight: 600;
	border-radius: 50rpx;
	background: var(--btnBgColor);
	position: fixed;
	bottom: 60rpx;
	left: 50%;
	transform: translateX(-50%);
}
.empty {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: #999999;
}
.empty .custom-icon {
	font-size: 92rpx;
}
</style>
